import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISlider from 'common/components/IAISlider';
import { setIterations } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';

const selector = createSelector(
  [stateSelector],
  (state) => {
    const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
      state.config.sd.iterations;
    const { iterations } = state.generation;
    const { shouldUseSliders } = state.ui;
    const isDisabled =
      state.dynamicPrompts.isEnabled && state.dynamicPrompts.combinatorial;

    const step = state.hotkeys.shift ? fineStep : coarseStep;

    return {
      iterations,
      initial,
      min,
      sliderMax,
      inputMax,
      step,
      shouldUseSliders,
      isDisabled,
    };
  },
  defaultSelectorOptions
);

const ParamIterations = () => {
  const { iterations, min, inputMax, step, isDisabled, sliderMax } =
    useAppSelector(selector);
  const dispatch = useAppDispatch();
  const { t } = useTranslation();

  const handleChange = useCallback(
    (v: number) => {
      dispatch(setIterations(v));
    },
    [dispatch]
  );

  return (
    <IAISlider
      isDisabled={isDisabled}
      label={t('parameters.images')}
      step={step}
      min={min}
      max={sliderMax}
      onChange={handleChange}
      value={iterations}
      withInput
      withSliderMarks
      sliderNumberInputProps={{
        max: inputMax,
        textAlign: 'center',
        width: '4rem',
        height: '30px',
      }}
      sliderFormLabelProps={{
        mb: '0',
        h: '30px',
        lineHeight: '30px',
      }}
      sliderFormControlProps={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'start',
        gap: '3',
      }}
    />
    // <IAINumberInput
    //   isDisabled={isDisabled}
    //   label={t('parameters.images')}
    //   step={step}
    //   min={min}
    //   max={inputMax}
    //   onChange={handleChange}
    //   value={iterations}
    //   numberInputFieldProps={{ textAlign: 'center', width: '60px' }}
    //   h="30px"
    //   formLabelProps={{ margin: '0px' }}
    //   formControlProps={{
    //     display: 'flex',
    //     flexDirection: 'row',
    //     justifyContent: 'space-between',
    //     alignItems: 'center',
    //   }}
    // />
  );
};

export default memo(ParamIterations);
